<template>
	<view class="container">
		<view class="flexTop" v-show="chooseClassOrTime">
			<view class="flexSingle" :class="selType===1 ? 'tapactive' : ''" @click="chooseType(1)">
				<view class="flexCont">
					<text>奇妙学堂</text>
					<view class="typedetail">
						<view>3-15岁兴趣学习</view>
							<image v-if="selType===1" src="../../../static/image/school/typeSel.png"></image>
						</view>
				</view>
			</view>
			<view class="flexSingle" :class="selType===2 ? 'tapactive' : ''" @click="chooseType(2)">
				<view class="flexCont">
					<text>乐学学堂</text>
					<view class="typedetail">
						<view>成人职业教育</view>
						<image v-if="selType===2" src="../../../static/image/school/typeSel.png"></image>
					</view>	
				</view>
			</view>
			<view class="flexSingle" :class="selType===3 ? 'tapactive' : ''" @click="chooseType(3)">
				<view class="flexCont">
					<text>长青学堂</text>
					<view class="typedetail">
						<view>老人幸福学习</view>
						<image v-if="selType===3" src="../../../static/image/school/typeSel.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="classAndTime">
			<view class="classCont" @click="chooseClass()"><text class="title">{{selClass}}</text><image :src="classArrow"></image></view>
			<view class="timeCont" @click="chooseTime()"><text class="title">{{selTime}}</text><image :src="timeArrow"></image></view>
		</view>
		<view class="classTimeDetail" v-show="!chooseClassOrTime">
			<view class="popuptitle">{{popupTip}}</view>
			<view class="selArea">
				<text v-for="(item,index) in classOrTimeList" :key="index" :class="{'selbg':selflag.indexOf(index)>-1}" @click="chooseItem(index)">{{item}}</text>
			</view>
			<button @click="confirmaSel()">确定</button>
		</view>
		<scroll-view class="allclassinfo" scroll-y="true">
			<view class="singleClass" v-for="(item,index) in classdetaillist" :key="index" @click="goPage('/pages/school/detail/index',{id:item.id})">
				<view class="singleTop">
					<view class="imgCont">
						<img-item class="imageCont" :src="item.cover"></img-item>
					</view>
					<view class="classdetailCont">
						<text class="classtitle">{{item.name}}</text>
						<view class="classCharaCont">
							<text class="classNum">{{item.courseNodes}}节</text>
							<text v-for="(label,idx) in item.courseLabelList" :key="idx" v-if="idx<3">{{label}}</text>
						</view>
						<text class="classProvider">{{item.institutionName}}</text>
						<view class="awardsCont">
							<text class="awards">{{item.registrationPrice}}积分+{{item.paymentPrice}}元</text>
							<text class="awardsNums">人数 : {{item.classInfo.currentNumber}}/{{item.classInfo.fullNumber}}</text>
						</view>
					</view>
				</view>
				<view class="classtime">
					<text class="con" v-for="(classtime,idx) in item.classInfo.classTimeList" :key="idx">
						上课时间：{{intToWord(classtime.week)}} {{classtime.startTime.slice(0,-3)}}-{{classtime.endTime.slice(0,-3)}}
					</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import * as api from "@/http/api";
	export default {
		data() {
			return {
				selType:1,
				chooseClassOrTime:true,
				selClass:"全部类目",
				classArrow:"../../../static/image/school/downarrow.png",
				selTime:"全时间段",
				timeArrow:"../../../static/image/school/downarrow.png",
				popupTip:"选择上课时间段",
				classtimeType:"classtype",
				classlist:[],
				classIdlist:[],
				timelist:["周一","周二","周三","周四","周五","周六","周日"],
				classOrTimeList:[],
				selflag:[],
				classselflag:[],
				timeselflag:[],
				currentPage:1,
				currentSize: 10,
				isLoadOver: false,
				chooseClassType:["WONDERFUL","HAPPY_LEARNING","EVERGREEN"],
				classdetaillist:[],
			}
		},
		onLoad(){
			this.getSubjectlist();
		},
		onReachBottom(){
			this.loadMore()
		},
		methods: {
			getSubjectlist(){//获取课程科目列表
				this.$request({
					url: api.subjectlist,
				}).then(res=>{
					console.log(res);
					res.forEach((item) => {
					    this.classlist.push(item.name);
						this.classIdlist.push(item.id);
					});
					this.getCourselist();
				})
			},
			getCourselist(){//获取课程学堂列表
				let temptime=[];
				let tempclass=[];
				this.selClass.split("、").forEach((item) => {
				   this.classlist.forEach((itemT,idx) => {
				      if(item==itemT){
						  tempclass.push(this.classIdlist[idx]);
					  }
				   });
				});
				this.selTime.split("、").forEach((item) => {
				   this.timelist.forEach((itemT,idx) => {
				      if(item==itemT){
						  temptime.push(idx+1);
					  }
				   });
				});
				let classTimeWeeks=this.selTime=="全时间段"?"1,2,3,4,5,6,7":temptime.join(",");
				let courseSubjectIds=this.selClass=="全部类目"?this.classIdlist.join(","):tempclass.join(",");
				this.$request({
					url: api.courselist,
					data: {	
						classTimeWeeks:classTimeWeeks,
						courseSubjectIds:courseSubjectIds,
						current: this.currentPage,
						size: this.currentSize,
						type:this.chooseClassType[this.selType-1]
					}
				}).then(res=>{
					console.log(res);
					if(this.currentSize * this.currentPage >= res.total){
						this.isLoadOver = true
					}
					this.classdetaillist.splice(this.currentSize * (this.currentPage - 1),this.currentSize,...res.records)
					this.getTimeLen()
				}).catch( err => {
					this.isLoadOver = false
				})
			},
			getTimeLen(){
				this.classdetaillist.map((item,index) => {
					if (item&&item.classInfo&&item.classInfo.classTimeList&&item.classInfo.classTimeList.length > 1) {
						item.classInfo.classTimeList = item.classInfo.classTimeList.splice(0,2)
					}
					return item;
				})
			},
			// 加载更多
			loadMore(){
				if(this.isLoaderOver) return
				this.currentPage ++
				this.getCourselist()
			},
			goToClassdetail(classid){
				uni.navigateTo({
					url: `/pages/school/detail/index?classid=${encodeURIComponent(JSON.stringify(classid))}`
				});
			},
			chooseType(index){
				this.selType=index;
				this.isLoadOver = false;
				this.classdetaillist = [];
				this.getCourselist();
			},
			chooseClass(){
				if(this.chooseClassOrTime){
					this.chooseClassOrTime=false;
					this.popupTip="选择科目";
					this.classArrow="../../../static/image/school/uparrow.png";
					this.classtimeType="classtype";
					this.classOrTimeList=this.classlist;
					this.selflag=this.classselflag;
				}
			},
			chooseTime(){
				if(this.chooseClassOrTime){
					this.chooseClassOrTime=false;
					this.popupTip="选择上课时间段";
					this.timeArrow="../../../static/image/school/uparrow.png"
					this.classtimeType="timetype";
					this.classOrTimeList=this.timelist;
					this.selflag=this.timeselflag;
				}
			},
			confirmaSel(){
				this.chooseClassOrTime=true;
				if(this.classtimeType==="classtype"){
					this.classArrow="../../../static/image/school/downarrow.png";
					this.classselflag=JSON.parse(JSON.stringify(this.selflag));
					if(this.classselflag.length==this.classlist.length || !this.classselflag.length){
						this.selClass="全部类目";
					}else if(this.classselflag.length > 0){
						this.selClass="";
						this.classselflag.forEach((value,idx)=>{
							if(idx==0){
								this.selClass= this.classlist[value];
							}else{
								this.selClass+="、"+this.classlist[value]
							}
						});
					}
				}else if(this.classtimeType==="timetype"){
					this.timeArrow="../../../static/image/school/downarrow.png"
					this.timeselflag=JSON.parse(JSON.stringify(this.selflag));
					if(this.timeselflag.length==this.timelist.length || !this.timeselflag.length){
						this.selTime="全时间段";
					}else if(this.timeselflag.length>0){
						this.selTime="";
						this.timeselflag.sort();
						this.timeselflag.forEach((value,idx)=>{
							if(idx==0){
								this.selTime=this.timelist[value];
							}else{
								this.selTime+="、"+this.timelist[value]
							}
						});
					}
					console.log(this.selTime)
				}
				this.selflag=[];
				this.getCourselist();
			},
			chooseItem(index){
				console.log(this.selflag)
				let arrIndex = this.selflag.indexOf(index);
				if(arrIndex>-1){
					this.selflag.splice(arrIndex,1);
				}else{
					if(this.selflag.length<3){
						this.selflag.push(index);
					}else{
						uni.showToast({
						    title: '最多选三个',
							icon:'none'
						});
					}
					
				}
			},
			intToWord(week){
				let day;
				switch (week) {
				  case 7:
				    day = "周日";
				    break;
				  case 1:
				    day = "周一";
				    break;
				  case 2:
				    day = "周二";
				    break;
				  case 3:
				    day = "周三";
				    break;
				  case 4:
				    day = "周四";
				    break;
				  case 5:
				    day = "周五";
				    break;
				  case  6:
				    day = "周六";
				}
				return day;
			},
		}
	}
</script>

<style lang="scss">
	@import "./index.scss";
</style>
